<template>
  <div class="my-dicker">
    <div class="header">
      <div class="left"></div>
      <div class="right">我的议价</div>
    </div>

    <div class="content">
      <el-card class="filter-card">
        <Tab :tabList="tabList"></Tab>
        <FilterCard :searchObj="searchObj" @handle="handle"></FilterCard>
        <!-- <div>
          <i class="el-icon-s-tools setting-column" @click="setColumn"></i>
        </div> -->
        <Table
          :tableData="tableData"
          :tableColumn="tableColumn"
          :tableCellWidth="tableCellWidth"
          :tableCellAlign="tableCellAlign"
          :tableShowTooltip="tableShowTooltip"
          :tableEdit="tableEdit"
          :tableShowPagination="tableShowPagination"
          :paginationObj="paginationObj"
          :tableIsShowSerial="false"
          :tableIsShowCheckbox="true"
        >
          <!-- 自定义单元格 -->
          <template #enquiryType="scope">
            <el-tag type="success">{{ scope.row.enquiryType }}</el-tag>
          </template>

          <template #model="scope">
            <el-link type="primary" @click="clickOrder(scope.row)">{{
              scope.row.model
            }}</el-link>
          </template>

          <template #status="scope">
            <el-tag type="success">{{ scope.row.status }}</el-tag>
          </template>
        </Table>
      </el-card>
    </div>

    <DickerDrawer :drawer="drawer" @close="closeDrawer"></DickerDrawer>

    <!-- <SetColumn
      :dialogVisible="dialogVisible"
      :columnList="columnList"
      @close="closeColumn"
      @refreshColumn="refreshColumn"
      @move="move"
    ></SetColumn> -->
  </div>
</template>

<script>
import Table from "@/components/ability-components/table.vue";
// import SetColumn from "../publishEnquiry/components/SetColumn.vue";
import Tab from "@/components/tab-components/Tab.vue";
import FilterCard from "./components/FilterCard.vue";
import DickerDrawer from "./components/DickerDrawer.vue";
export default {
  components: {
    Tab,
    FilterCard,
    Table,
    DickerDrawer,
  },
  data() {
    return {
      drawer: false,
      tabList: [
        { id: 1, name: "全部" },
        { id: 2, name: "待议价" },
        { id: 3, name: "议价完成" },
      ],
      searchObj: {
        model: "",
        orderId: "",
        priceType: "",
        status: "",
        invoiceType: "",
        time: "",
        Date: [],
      },
      columnList: [
        { id: 1, label: "状态", prop: "status", isShow: true },
        { id: 2, label: "品牌", prop: "brand", isShow: true },
        { id: 3, label: "型号", prop: "model", isShow: true },
        { id: 4, label: "数量", prop: "count", isShow: true },
        { id: 5, label: "MPQ", prop: "MPQ", isShow: true },
        { id: 6, label: "批次", prop: "batch", isShow: true },
        { id: 7, label: "封装", prop: "encapsulation", isShow: true },
        { id: 8, label: "接受价", prop: "price", isShow: true },
        { id: 9, label: "交货期", prop: "deliveryDate", isShow: true },
        { id: 10, label: "包装", prop: "packing", isShow: true },
        { id: 11, label: "备注", prop: "remark", isShow: true },
      ],
      dialogVisible: false,
      paginationObj: {
        page: 1,
        size: 10,
        total: 100,
      },
      tableShowPagination: true,
      tableEdit: {
        isShowEdit: false,
        align: "center",
      },
      tableShowTooltip: [],
      tableCellAlign: [
        {
          prop: "applyDate",
          align: "center",
        },
        {
          prop: "remainDate",
          align: "center",
        },
        {
          prop: "enquiryType",
          align: "center",
        },
        {
          prop: "enquiryId",
          align: "center",
        },
        {
          prop: "status",
          align: "center",
        },
        {
          prop: "model",
          align: "center",
        },
        {
          prop: "brand",
          align: "center",
        },
        {
          prop: "count",
          align: "center",
        },
        {
          prop: "batch",
          align: "center",
        },
        {
          prop: "encapsulation",
          align: "center",
        },
        {
          prop: "currency",
          align: "center",
        },
        {
          prop: "myDicker",
          align: "center",
        },
        {
          prop: "dickerConfirm",
          align: "center",
        },
        {
          prop: "deliveryDate",
          align: "center",
        },
        {
          prop: "deliveryAddress",
          align: "center",
        },
        {
          prop: "MPQ",
          align: "center",
        },
        {
          prop: "packing",
          align: "center",
        },

        {
          prop: "billingType",
          align: "center",
        },
        {
          prop: "remark",
          align: "center",
        },
      ],
      tableCellWidth: [
        {
          prop: "applyDate",
          width: "200",
        },
        {
          prop: "remainDate",
          width: "120",
        },
        {
          prop: "enquiryType",
          width: "200",
        },
        {
          prop: "enquiryId",
          width: "200",
        },
        {
          prop: "myDicker",
          width: "150",
        },
        {
          prop: "dickerConfirm",
          width: "200",
        },
        {
          prop: "deliveryDate",
          width: "150",
        },
        {
          prop: "billingType",
          width: "200",
        },
      ],
      tableColumn: [
        {
          prop: "applyDate",
          label: "申请日期",
        },
        {
          prop: "remainDate",
          label: "剩余时间",
        },
        {
          prop: "enquiryType",
          label: "询价类型",
          slot: true,
        },
        {
          prop: "enquiryId",
          label: "询价单号",
        },
        {
          prop: "status",
          label: "状态",
          slot: true,
        },
        {
          prop: "model",
          label: "型号",
          slot: true,
        },
        {
          prop: "brand",
          label: "品牌",
        },
        {
          prop: "count",
          label: "数量",
        },
        {
          prop: "batch",
          label: "批次",
        },
        {
          prop: "encapsulation",
          label: "封装",
        },
        {
          prop: "currency",
          label: "币种",
        },
        {
          prop: "myDicker",
          label: "我的议价",
        },
        {
          prop: "dickerConfirm",
          label: "议价确认",
        },

        {
          prop: "deliveryDate",
          label: "交货期",
        },
        {
          prop: "deliveryAddress",
          label: "交货地",
        },
        {
          prop: "MPQ",
          label: "MPQ",
        },
        {
          prop: "packing",
          label: "包装",
        },
        {
          prop: "billingType",
          label: "开票类型",
        },
        {
          prop: "remark",
          label: "备注",
        },
      ],
      tableData: [
        {
          Key: "1",
          ID: "1",
          applyDate: "2022-10-5 00:00:00",
          remainDate: "18:23:21",
          enquiryType: "实单询价", //询价类型
          enquiryId: "XJ22020000294", //询价单号
          status: "待议价",
          model: "H1", //型号
          brand: "KEMET", //品牌
          count: "100", //数量
          batch: "1", //批次
          encapsulation: "XXXW95", //封装
          currency: "人民币", //币种
          myDicker: "11.000000", //我的议价
          dickerConfirm: "11.000000", //议价确认
          deliveryDate: "2022-11-11", //交货期
          deliveryAddress: "国内", //交货地
          MPQ: "MPQ", //MPQ
          packing: "散装", //散装
          billingType: "增值税专用发票", //开票类型
          remark: "备注", //备注
        },
        {
          Key: "2",
          ID: "2",
          applyDate: "2022-10-5 00:00:00",
          remainDate: "18:23:21",
          enquiryType: "实单询价", //询价类型
          enquiryId: "XJ22020000294", //询价单号
          status: "待议价",
          model: "H1", //型号
          brand: "KEMET", //品牌
          count: "100", //数量
          batch: "1", //批次
          encapsulation: "XXXW95", //封装
          currency: "人民币", //币种
          myDicker: "11.000000", //我的议价
          dickerConfirm: "11.000000", //议价确认
          deliveryDate: "2022-11-11", //交货期
          deliveryAddress: "国内", //交货地
          MPQ: "MPQ", //MPQ
          packing: "散装", //散装
          billingType: "增值税专用发票", //开票类型
          remark: "备注", //备注
        },
        {
          Key: "3",
          ID: "3",
          applyDate: "2022-10-5 00:00:00",
          remainDate: "18:23:21",
          enquiryType: "实单询价", //询价类型
          enquiryId: "XJ22020000294", //询价单号
          status: "待议价",
          model: "H1", //型号
          brand: "KEMET", //品牌
          count: "100", //数量
          batch: "1", //批次
          encapsulation: "XXXW95", //封装
          currency: "人民币", //币种
          myDicker: "11.000000", //我的议价
          dickerConfirm: "11.000000", //议价确认
          deliveryDate: "2022-11-11", //交货期
          deliveryAddress: "国内", //交货地
          MPQ: "MPQ", //MPQ
          packing: "散装", //散装
          billingType: "增值税专用发票", //开票类型
          remark: "备注", //备注
        },
        {
          Key: "4",
          ID: "4",
          applyDate: "2022-10-5 00:00:00",
          remainDate: "18:23:21",
          enquiryType: "实单询价", //询价类型
          enquiryId: "XJ22020000294", //询价单号
          status: "待议价",
          model: "H1", //型号
          brand: "KEMET", //品牌
          count: "100", //数量
          batch: "1", //批次
          encapsulation: "XXXW95", //封装
          currency: "人民币", //币种
          myDicker: "11.000000", //我的议价
          dickerConfirm: "11.000000", //议价确认
          deliveryDate: "2022-11-11", //交货期
          deliveryAddress: "国内", //交货地
          MPQ: "MPQ", //MPQ
          packing: "散装", //散装
          billingType: "增值税专用发票", //开票类型
          remark: "备注", //备注
        },
        {
          Key: "5",
          ID: "5",
          applyDate: "2022-10-5 00:00:00",
          remainDate: "18:23:21",
          enquiryType: "实单询价", //询价类型
          enquiryId: "XJ22020000294", //询价单号
          status: "待议价",
          model: "H1", //型号
          brand: "KEMET", //品牌
          count: "100", //数量
          batch: "1", //批次
          encapsulation: "XXXW95", //封装
          currency: "人民币", //币种
          myDicker: "11.000000", //我的议价
          dickerConfirm: "11.000000", //议价确认
          deliveryDate: "2022-11-11", //交货期
          deliveryAddress: "国内", //交货地
          MPQ: "MPQ", //MPQ
          packing: "散装", //散装
          billingType: "增值税专用发票", //开票类型
          remark: "备注", //备注
        },
      ],
    };
  },
  methods: {
    closeDrawer() {
      this.drawer = false;
    },
    clickOrder(row) {
      this.drawer = true;
      // this.$router.push("/home/quotedPriceDetail");
    },
    dicker() {
      this.$router.push("/home/addEnquiry");
    },
    createOrder() {
      this.$router.push("/home/createOrder");
    },
    search() {
      console.log(this.searchObj, "search");
    },
    clear() {
      Object.keys(this.searchObj).forEach((key) => {
        if (Array.isArray(this.searchObj[key])) {
          this.searchObj[key] = [];
        } else {
          this.searchObj[key] = "";
        }
      });
    },
    handle(func) {
      console.log(func, "handle");
      this[func]();
    },
    move(type, index) {
      if (type == 1) {
        this.sortUp(index);
      } else {
        this.sortDown(index);
      }
    },
    sortUp(index) {
      const temp = this.columnList[index - 1];
      this.$set(this.columnList, index - 1, this.columnList[index]);
      this.$set(this.columnList, index, temp);
    },
    sortDown(index) {
      const temp = this.columnList[index + 1];
      this.$set(this.columnList, index + 1, this.columnList[index]);
      this.$set(this.columnList, index, temp);
    },
    refreshColumn() {
      this.tableColumn = this.columnList
        .filter((item) => item.isShow)
        .map((item) => {
          return { prop: item.prop, label: item.label };
        });
      this.dialogVisible = false;
      console.log(this.tableColumn, "tableColumn===============");
    },
    closeColumn() {
      this.dialogVisible = false;
    },
    setColumn() {
      console.log("setColumn");
      this.dialogVisible = true;
    },
    again() {
      console.log("again");
    },
    btnClick(item) {
      this[item.fuc]();
    },
  },
  created() {},
};
</script>
<style lang="scss" scoped>
.my-dicker {
  position: relative;
  .header {
    display: flex;
    margin-bottom: 20px;
    .left {
      background-color: #442a8d;
      width: 5px;
      height: 20px;
      margin-right: 5px;
    }
    .right {
      font-weight: 650;
      color: #666666;
      font-size: 16px;
    }
  }
  .filter-card {
    margin-top: 20px;
  }

  .setting-column {
    position: absolute;
    top: 275px;
    right: 19px;
    z-index: 999;
    font-size: 20px;
    cursor: pointer;
  }
}
</style>
